<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">
    <title>Box Model</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            /* 
                4 上 右 下 左
                3 上 左右 下
                2 上下 左右
                1 上下左右
             */
            /* border-width: 10px 20px 30px 40px; */
            /* border-width: 10px 20px 30px; */
            /* border-xxx-width */
            /* xxx:top left right bottom */
            border-top-width: 10px;
            border-color: blue;
            /* 边界样式 */
            /* style:
                dashed 直线虚线 
                dotted 点状虚线
                solid 实线
                double 双线
            */
            border-style: dashed;
        }

        .border {
            width: 200px;
            height: 200px;
            background-color: brown;
            border: orange solid 20px;
            border-right: none;
        }

        /* 内边距 */
        /* 内边框的颜色会和背景色一致,padding的尺寸也会影响box的尺寸 */
        .padding {
            width: 200px;
            height: 200px;
            background-color: cornflowerblue;
            padding: 40px;
            border: solid 10px orangered;
            padding-top: 20px;
            /* 规则和border一样 */
        }

        .padding_inside {
            background-color: hotpink;
            width: 100%;
            height: 100%;
        }

        /* visible box size = padding size + content size + border size */
        /* margin 外边框 不会影响box的尺寸 */
        /* margin-top,left改变自己的位置,bottom,right改变其他元素的位置 */
        .margin {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
            margin: 40px;
        }
    </style>
</head>

<body>
    <!-- border -->
    <div class="box">
    </div>
    <div class="border">
    </div>
    <!-- padding -->
    <div class="padding">
        <div class="padding_inside"></div>
    </div>
    <!-- margin -->
    <div class="margin">
    </div>
</body>

</html>